<template>
	<view class="box bg_f5">
		<view class="hidden" v-if="is_load">
			<view class="wrapper top" style="display: none;">
				<view class="list_circle_left"></view>
				<view class="list_circle_right"></view>
				<view class="van-ellipsis bg_fa font_38 text_bold list_top">{{detail_info.store.store_name}}</view>
				<view class="bg_fff content font_31 color_7b hidden">
					<view class="flex1 list">
						<view class="label">营业时间：</view>
						<view class="w_flex1">{{detail_info.store.business_hours}}</view>
					</view>
					<view class="flex1 list">
						<view class="label">联系方式：</view>
						<view class="w_flex1">{{detail_info.store.mobile}}</view>
						<view class="wrapper_right font_23 color_7b" @click="get_phone">拨号</view>
					</view>
					<view class="flex1 list">
						<view class="label">地<text style="color: #fff;">空空</text>址：</view>
						<view class="w_flex1">{{detail_info.store.address}}</view>
						<view class="wrapper_right font_23 color_7b" @click="get_map">导航</view>
					</view>
					<view class="font_27 color_ff6a00" style="margin: 35rpx 0 27rpx 0;" v-if="detail_info.status == 3">提示：订单已经完成无法查看地址电话。</view>
					<view class="font_27 color_ff6a00" style="margin: 35rpx 0 27rpx 0;" v-else-if="detail_info.store.mobile == '********'">提示：电话和地址在寄存当天可见。</view>
					<view v-else>
						<view class="font_27 color_ff6a00" style="margin: 35rpx 0 27rpx 0;" v-if="detail_info.status == 1">提示：点击导航规划路线。</view>
					</view>
					
				</view>
			</view>
			
      <view class="wrapper hidden bg_fff content">
				<view class="top_p1 van-hairline--bottom">
					<view class="font_35 text_bold top_m4">续存日期</view>
					<view class="flex8">
             <!-- @click="is_show = true;is_times_type = 1;" -->
						<view>
							<view class="font_31 text_bold">{{start_M_d}}</view>
							<view class="font_23 color_7b top_m3">续存开始时间</view>
						</view>
						<view class="font_23 day_text">续存{{days}}天</view>
						<view @click="is_show = true;is_times_type = 2;">
							<view class="font_31 text_bold">{{end_M_d}}</view>
							<view class="font_23 color_7b top_m3">修改取件时间</view>
						</view>
					</view>
				</view>
				
        <view class="flex8 van-hairline--bottom list">
					<view class="label">行李箱</view>
					<view class=" font_33 flex1">x{{detail_info.trunk_number}}</view>
				</view>
				<view class="flex8 van-hairline--bottom list">
					<view class="label">背包</view>
					<view class=" font_33 flex1">x{{detail_info.packsack_number}}</view>
				</view>
				<view class="flex8 van-hairline--bottom list" @click="get_coupon">
					<view class="label">优惠券</view>
					<view>
						<view class="flex3">
							<view class="font_31 top_m5" style="color: red;" v-if="coupon_data.id">
								-¥{{coupon_data.yh_price}}
							</view>
							<view class="font_31 color_7b top_m5" v-else>{{coupon_num}}张可用</view>
							<van-icon name="arrow" color="#7b7b7b"></van-icon>
						</view>
					</view>
				</view>
				<view class="list flex9">
					<view class="font_33 text_bold">合计：¥{{submit_info.price}}</view>
				</view>
			</view>
      <view class="wrapper hidden bg_fff content">
      	<view class="font_31 flex8 phone_wrapper">
      		<view>联系电话</view>
      		<view>{{detail_info.mobile}}</view>
      	</view>
      </view>
			<view class="bg_fff flex8 bottom_wrapper van-hairline--top">
				<view class="bottom_left flex3">
					<view class="font_27 top_m6">共{{submit_info.packsack_number + submit_info.trunk_number}}件，合计</view>
					<view class="font_35 text_bold color_ff0008">¥ {{submit_info.price}}</view>
				</view>
				<view class="bottom_btn font_35 text_bold flex7 color_fff" @click="get_sure">确认续存</view>
			</view>
		</view>
		<!-- 日期 -->
		<van-popup position="bottom" :show="is_show">
			<van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :formatter="formatter"
				@cancel="is_show = false;" @confirm="get_time" />
		</van-popup>
	</view>
</template>

<script>
	// 价格 = 背包单价 * 数量 * 天数 + 行李箱单价 * 数量 * 天数
	// 价格 = 天数 * (背包单价 * 数量 + 行李箱单价 * 数量)
	export default {
		data() {
			return {
				id: '',
				mobile: '',
				is_btn: true,
				is_agree: true,
				is_load: false,
				detail_info: {}, // 商家信息
				is_show: false,
				coupon_num: 0,
				days: '1', // 天数
				start_y: '', // 开始年
				end_y: '', // 结束年
				coupon_data: {}, // 优惠券
				start_M_d: '', // 开始时间
				end_M_d: '', // 结束时间
				is_btn_num: 0, // 1-文字显示抖动
				is_times_type: 1, // 1-开始 2-结束
				currentDate: new Date().getTime(),
				minDate: new Date().getTime(),
				start_t: new Date().getTime(), // 开始时间戳
				end_t: new Date().getTime(), // 结束时间戳
				now_time: new Date(),
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					if (type === 'day') {
						return `${value}日`;
					}
					return value;
				},
				submit_info: {
					store_id: '',
					start_time: '', // 开始时间
					end_time: '', // 结束时间
					packsack_number: 0, // 背包数量
					trunk_number: 0, // 行李箱数量
					coupon_id: '', // 优惠券id
					price: null, // 总价
					mobile: '', // 手机号
				},
        
        z_start:'',
        z_end:'',
        store:'',
        store_detail:''
        
			}
		},
		onLoad(e) {
      this.id = e.id;
      this.store = e.store
			getApp().get_loading();
			this.getOrdersDetail();
      this.get_detail();
      console.log('00000000000000',this.getDaysBetween('2023/08/01','2023/08/01'))
		},
		onShow() {
			if (uni.getStorageSync('couponData')) {
				this.coupon_data = uni.getStorageSync('couponData');
				this.submit_info.coupon_id = this.coupon_data.id;
				this.get_all_price();
				uni.removeStorageSync('couponData');
			}
			
		},
		onLaunch() {
      
		},
		methods: {
      /**
       * 计算两个日期之间的天数
       *  date1  开始日期 yyyy-MM-dd
       *  date2  结束日期 yyyy-MM-dd
       *  如果日期相同 返回一天 开始日期大于结束日期，返回0
       */
      getDaysBetween(date1,date2){
          var  startDate = Date.parse(date1);
          var  endDate = Date.parse(date2);
          if (startDate>endDate){
              return 0;
          }
          if (startDate==endDate){
              return 1;
          }
          var days=(endDate - startDate)/(1*24*60*60*1000)+1;
          return  days;
      },

      get_detail() {
      	this.$http.get(this.$api.storeDetail, {
      		store_id: this.store
      	}).then(res => {
      		this.is_load = true;
      		this.store_detail = res.data;
      
      		this.get_all_price();
      	})
      },
      // 获取可用优惠券
      getCouponValidList(last_price) {
      	// 判断当订单价格大于零时 去请求是否有可用优惠券
      	if (last_price > 0) {
      		let params = JSON.parse(JSON.stringify(this.submit_info));
          console.log('params===>',params)
          if(last_price){
            params.price = last_price
          }
          params.type_id = 1;
      		this.$http.post(this.$api.getCouponValidList, {
      			data: params
      		}).then(res => {
      			uni.hideLoading() // 关闭加载中
      			this.coupon_num = res.data.list.length;
            this.coupon_data = res.data.coupon;
            this.coupon_data.yh_price = this.coupon_data.max_amount;
            this.submit_info.coupon_id = this.coupon_data.id;
            this.submit_info.price = Number(last_price) - Number(this.coupon_data.max_amount)
      		})
      	}
      
      },
      dateAddDays(dateStr,dayCount) {
          var tempDate=new Date(dateStr.replace(/-/g,"/"));//把日期字符串转换成日期格式
          var resultDate=new Date((tempDate/1000+(86400*dayCount))*1000);//增加n天后的日期
          var resultDateStr=(resultDate.getMonth()+1)+"月"+(resultDate.getDate())+"日";//将日期转化为字符串格式
          var fullStr = resultDate.getFullYear()+"年"+(resultDate.getMonth()+1)+"月"+(resultDate.getDate())+"日";//将日期转化为字符串格式
          var b=resultDate.getFullYear()+"-"+(resultDate.getMonth()+1)+"-"+(resultDate.getDate());//将日期转化为字符串格式
          return {a:resultDateStr, b:b, fullStr:fullStr};
      },
      
      
      getOrdersDetail() {
      	let that = this;
      	this.$http.get(this.$api.getMyOrdersDetail, {
      		order_id: this.id,
      		'scene':true,
      	}).then(res => {
      		this.is_load = true;
          this.submit_info.price = Number(res.data.packsack_number)*Number(this.store_detail.packsack);
          this.submit_info.store_id = res.data.store.id;
          this.submit_info.mobile = res.data.mobile;
          this.submit_info.packsack_number = res.data.packsack_number;
          this.submit_info.trunk_number = res.data.trunk_number;
          this.submit_info.mobile = res.data.mobile;
          
      		if (res.data.mobile) {
      			res.data.mobile = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(7);
      		}
      			
      		this.detail_info = res.data;
          let start_time = res.data.start_time.replace('年','-').replace('月','-').replace('日','');
          let end_time = res.data.end_time.replace('年','-').replace('月','-').replace('日','');
          this.start_M_d = this.dateAddDays(start_time,1).a;
          this.end_M_d = this.dateAddDays(end_time,1).a;
          this.z_start = this.dateAddDays(start_time,1).fullStr;
          this.z_end = this.dateAddDays(start_time,1).fullStr;
          this.currentDate = new Date(this.dateAddDays(end_time,1).b).getTime()
          this.minDate = this.currentDate;
          
          // submit_info: {
          // 	store_id: '',
          // 	start_time: '', // 开始时间
          // 	end_time: '', // 结束时间
          // 	packsack_number: 0, // 背包数量
          // 	trunk_number: 0, // 行李箱数量
          // 	coupon_id: '', // 优惠券id
          // 	price: null, // 总价
          // 	mobile: '', // 手机号
          // },
          
          
      		if(res.data.status == 3){  // 订单完成 三天后 商家的电话地址不可见
      			var new_time = res.time;
      			if(new_time - res.data.createtime >= 259200){
      				this.detail_info.store.mobile = '********';
      				this.detail_info.store.address = '********';
      			}
      		}else{
      			if (!that.detail_info.is_nav_mobile){
      				this.detail_info.store.mobile = '********';
      				this.detail_info.store.address = '********';
      			}
      		}
      		
      		
      	})
      },
      // 选择时间
      get_time(e) {
      	this.is_show = false;
      
      // 	if (this.is_times_type === 1) {
      // 		this.start_t = e.detail;
      // 		// 开始时间
      // 		this.start_M_d = this.get_date(e.detail);
      
      // 		if (Number(this.end_t) < Number(this.start_t)) {
      // 			this.end_t = this.start_t;
      // 			this.end_M_d = this.start_M_d;
      // 		}
      // 	}
      
      	if (this.is_times_type === 2) {
      		if (e.detail < this.start_t) return getApp().get_msg('请选择正确的取件时间');
      
      		this.end_t = e.detail;
          const my = this.get_date(e.detail)
      		this.end_M_d = my.m;
          this.z_end = my.y;
      	}
      
      	this.get_day_num();
      },
      // 合计金额
      get_all_price() {
        const days = Number(this.days); //天数
        const trunk = Number(this.detail_info.trunk); // 行李箱的单价
        const trunk_number = Number(this.submit_info.trunk_number); //行李箱数量；
        const packsack = Number(this.detail_info.packsack) //背包单价
        const packsack_number = Number(this.submit_info.packsack_number) //背包数量；
      	let price = days * (trunk*trunk_number + packsack*packsack_number);
        
        console.log('days=>',days, 'trunk=>',trunk, 'trunk_number=>',trunk_number, 'packsack=>',packsack, 'packsack_number=>',packsack_number, price, price > Number(this.coupon_data.max_price));
        console.log('this.submit_info.coupon_id',this.submit_info.coupon_id, this.coupon_data)
        // 已使用优惠券且 使用的优惠券的金额小于满减金额
      	if (this.submit_info.coupon_id && this.coupon_data && (price > Number(this.coupon_data.max_price) || price === Number(this.coupon_data.max_price))) {
      		// 现阶段 优惠券只有满减 所以只需将计算优惠金额即可 
      		// price = price - this.coupon_data.max_amount;
      		this.coupon_data.yh_price = this.coupon_data.max_amount;
          
      	}else{
          this.submit_info.coupon_id = 0;
          this.coupon_data = {};
          this.coupon_num = 0;
          uni.hideLoading() // 关闭加载中
          console.log('优惠券不取消')
        }
        const last_price = Number(price.toFixed(2))
      	
      
      	if (last_price <= 0) {
      		this.submit_info.coupon_id = 0;
      		this.submit_info.price = 0;
      		this.coupon_data = {};
      		this.coupon_num = 0;
      		uni.hideLoading() // 关闭加载中		
      	}
        if(!uni.getStorageSync('couponData')){
          this.getCouponValidList(last_price);
        }else{
          this.submit_info.price = last_price - this.coupon_data.max_amount;
          uni.removeStorageSync('couponData');
        }
      },
      // 合计金额
      get_all_price1() {
        const days = Number(this.days); //天数
        const s_price = Number(this.detail_info.pay_retrun_price)
      	let price = days * s_price; //*1000
        // 已使用优惠券且 使用的优惠券的金额小于满减金额
      	if (this.submit_info.coupon_id && this.coupon_data && price > Number(this.coupon_data.max_price)) {
      		// 现阶段 优惠券只有满减 所以只需将计算优惠金额即可 
      		price = price - this.coupon_data.max_amount;
      		this.coupon_data.yh_price = this.coupon_data.max_amount;
      	}else{
          this.submit_info.coupon_id = 0;
          this.coupon_data = {};
          this.coupon_num = 0;
          uni.hideLoading() // 关闭加载中
        }
      	this.submit_info.price = price.toFixed(2);
      
      	if (this.submit_info.price <= '0.00') {
      		this.submit_info.coupon_id = 0;
      		this.submit_info.price = 0;
      		this.coupon_data = {};
      		this.coupon_num = 0;
      		uni.hideLoading() // 关闭加载中		
      	}
      
      	this.getCouponValidList(this.submit_info.price);
      },
      
      get_date(value) {
      	var date = new Date(value);
      	var Y = date.getFullYear();
      	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      	var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      	var h = date.getHours();
      	var m = date.getMinutes();
      	var s = date.getSeconds();
      
      	if (this.is_times_type === 1) {
      		// 开始时间
      		this.start_y = Y;
      	}
      
      	if (this.is_times_type === 2) {
      		// 结束时间
      		this.end_y = Y;
      	}
      
      	return {m:M + '月' + D + '日', y:Y + '年' + M + '月' + D + '日'};
      },
      
      
      
      
      
      
      
      
      
			get_user_info() {
				this.$http.get(this.$api.getMemberInfo).then(res => {
					if (res.data.mobile) {
						this.submit_info.mobile = res.data.mobile;

						res.data.mobile = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(7);

						this.mobile = res.data.mobile;
					}
				})
			},
			
			get_coupon() {
				if (this.coupon_num === 0) return getApp().get_msg('暂无可用优惠券');
				getApp().get_navigate_url('/pages/user/coupon?use=true&total_price=' + this.submit_info.price);
			},
			
			
			
			// 计算天
			get_day_num() {
				// let d_ = (this.end_t - this.start_t) / 86400000;
				// this.days = Math.ceil(d_);
        const s = this.z_start.replace('年','/').replace('月','/').replace('日','')
        const end = this.z_end.replace('年','/').replace('月','/').replace('日','')
        console.log(this.z_start,this.z_end,s, end)
        this.days = this.getDaysBetween(s, end)
				this.get_all_price();
			},

			// 确认下单
			get_sure() {
        const data = {
          order_id:this.detail_info.id,
          start_time: this.z_start,
          end_time:this.z_end,
          packsack_number: this.submit_info.packsack_number,
          trunk_number:this.submit_info.trunk_number,
          coupon_id: this.submit_info.coupon_id,
          price:this.submit_info.price
        }
        console.log('submit_info====>',this.submit_info, data);
				getApp().get_loading();

				if (this.is_btn) {
					this.is_btn = false;

					let self = this;

					uni.request({
						url: self.$api.renewOrders, // 接口地址
						method: 'POST', // 接口类型
						data: data,
						header: {
							'token': uni.getStorageSync('token'),
						},
						beforeSend: function(request) {
							request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
						},
						success: function(res) {
							uni.hideLoading() // 关闭加载中

							if (res.data.code === 200) {
								self.get_pay(res.data);
							} else {
								self.is_btn = true;

								if (res.data.error_code === 401) {
									setTimeout(() => {
										getApp().get_navigate_url('/pages/index/login')
									}, 2000)
								}

								getApp().get_msg(res.data.message);
							}
						},
						fail: function(error) {
							//
						}
					})
				}
			},
			get_pay(res) {
				let self = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.data.order_info.timeStamp,
					nonceStr: res.data.order_info.nonceStr,
					package: res.data.order_info.package,
					signType: res.data.order_info.signType,
					paySign: res.data.order_info.paySign,
					success: function() {
						self.is_btn = true;

						uni.setStorageSync('notice_text', JSON.stringify(self.detail_info.notice_text));
						uni.setStorageSync('orderList', true);

						uni.redirectTo({
							url: '/pages/index/success?id=' + res.data.order_id + '&notice_text=' + self
								.detail_info.notice_text
						});
					},
					fail: function(err) {
						self.is_btn = true;
						getApp().get_msg('您放弃了支付');
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.top_m1 {
		margin-top: 23rpx;
	}

	.top_m2 {
		margin: 10rpx 0 0;
	}

	.top_m3 {
		margin: 8rpx 0 0;
	}

	.top_m4 {
		margin: 0 0 21rpx 0;
	}

	.top_m5 {
		margin: 0 10rpx 0 0;
	}

	.top_m6 {
		margin: 0 12rpx 0 0;
	}

	.top_m7 {
		margin: 0 0 50rpx 0;
	}

	.top_p1 {
		padding: 20rpx 0;
	}

	.top_p2 {
		padding: 6rpx 0;
	}

	.box {
		padding-bottom: 140rpx;
		box-sizing: border-box;
	}

	.wrapper {
		width: 706rpx;
		margin: 16rpx auto;
		border-radius: 15rpx;
		overflow: hidden;

		.w_top {
			margin: 17rpx 0;
			padding: 0 24rpx;

			.w_info_image {
				width: 142rpx;
				height: 142rpx;
				border-radius: 23rpx;
				overflow: hidden;
				position: relative;
				margin-right: 23rpx;

				image {
					&:first-child {
						width: 100%;
						height: 100%;
					}

					&.active {
						filter: blur(4px);
					}

					&:last-child {
						bottom: 0;
						left: 0;
						width: 100%;
						height: 33rpx;
						position: absolute;
					}
				}
			}
		}

		.top_des {
			padding: 10rpx 23rpx;
			border-radius: 6rpx;

			image {
				width: 29rpx;
				height: 29rpx;
				margin-right: 13rpx;
			}
		}

		.bottom_icon {
			width: 100%;
			height: 4rpx;
		}
	}

	.content {
		box-sizing: border-box;
		padding: 0 24rpx;

		.day_text {
			padding: 0 17rpx 6rpx;
			border-bottom: 1px solid #707070;
		}
	}

	.list {
		height: 93rpx;
	}

	.border_wrapper {
		text-align: center;
		border-radius: 35rpx;
		border: 1px solid #D2D2D2;

		view {
			padding: 6rpx 0;

			&:first-child,
			&:last-child {
				width: 70rpx;
			}

			&:nth-child(2) {
				width: 84rpx;
				border-left: 1px solid #d2d2d2;
				border-right: 1px solid #d2d2d2;
			}
		}
	}

	.phone_wrapper {
		height: 80rpx;
	}

	.icon_img {
		padding: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.bottom_wrapper {
		width: 100%;
		bottom: 0;
		position: fixed;
		box-sizing: border-box;
		padding: 15rpx 29rpx 50rpx 46rpx;

		.bottom_btn {
			width: 269rpx;
			height: 77rpx;
			border-radius: 35rpx;
			background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
		}
	}

	.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		&.active {
			-webkit-animation-name: shake;
			animation-name: shake;
		}
	}

	@-webkit-keyframes shake {

		0%,
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0)
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(-10rpx, 0, 0);
			transform: translate3d(-10rpx, 0, 0)
		}

		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(10rpx, 0, 0);
			transform: translate3d(10rpx, 0, 0)
		}
	}

	@keyframes shake {

		0%,
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0)
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(-10rpx, 0, 0);
			transform: translate3d(-10rpx, 0, 0)
		}

		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(10rpx, 0, 0);
			transform: translate3d(10rpx, 0, 0)
		}
	}

	.box /deep/ .van-picker__cancel {
		color: #999;
	}

	.box /deep/ .van-picker__confirm {
		color: #FF6A00;
	}

	/deep/ .van-hairline--bottom:after {
		border-color: #ddd;
	}
  
  
  
  
  
  .title {
  	margin: 23rpx 58rpx 35rpx;
  }
  
  .wrapper.top {
  	width: 704rpx;
  	overflow: hidden;
  	margin: 23rpx auto;
  	position: relative;
  	border-radius: 23rpx;
    .list{height: auto; padding: 20rpx 0; margin: 0;}
  	&.active {
  		.w_flex1 {
  			text-align: right;
  		}
  	}
  
  	.list_circle_left,
  	.list_circle_right {
  		width: 31rpx;
  		height: 31rpx;
  		top: 98rpx;
  		position: absolute;
  		border-radius: 50%;
  		background-color: #F2F2F2;
  	}
  
  	.list_circle_left {
  		left: -15rpx;
  	}
  
  	.list_circle_right {
  		right: -15rpx;
  	}
  
  	.content {
  		padding: 0 23rpx;
  		line-height: 44rpx;
  	}
  }
  
  .list_top {
  	padding: 31rpx 23rpx;
  }
  
  .label {
  	margin-right: 15rpx;
  }
  
  .wrapper_right {
  	height: 33rpx;
  	margin-left: 21rpx;
  	padding: 4rpx 23rpx;
  	border-radius: 23rpx;
  	border: 2rpx solid #FF6A00; color: #FF6A00;
  }
</style>
